<script setup lang="ts">
import { ref } from "vue";
import { VAceEditor } from "vue3-ace-editor"
import { Dialog } from "../../hooks/dialog";
import '../../ace.config';


const content = ref("console.log('Hello World')")

const getContent = () => {
    Dialog.getDialog({title:"Hello World"}).show()
}

</script>

<template>
    <div id="box">
        <v-ace-editor v-model:value="content" lang="javascript" theme="monokai" style="height: 100%" :options="{
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true,
            tabSize: 2,
            showPrintMargin: false,
            fontSize: 16
        }" />
    </div>
    <button @click="getContent">button</button>
</template>

<style scoped lang="less">
#box {
    width: 500px;
    height: 500px;
}

button {
    width: 200px;
    height: 100px;
    border-radius: 5px;
    background-color: blue;
}
</style>